<!-- 废弃了 -->
<template>
  <div class="clearfix table-out">
    <div class="clearfix out-con">
      <el-button
        type="primary"
        plain
        size="small"
        class="return pointer"
        @click="returnGo"
        ><i class="iconfont icon-fanhui"></i> 返回
      </el-button>

      <ul class="menu-top pos-rel clearfix">
        <span
          class="point-pub pos-abs left"
          :class="{ focus: menuSelect == 0 }"
        ></span>
        <span
          class="point-pub pos-abs right"
          :class="{ focus: menuSelect == topData.length - 1 }"
        ></span>
        <li
          class="fxl pos-rel"
          :class="{ focus: index == menuSelect }"
          :style="{ width: `${(100 / topData.length).toFixed(0)}%` }"
          v-for="(item, index) in topData"
          @click="menuChange(item, index)"
          :key="index"
        >
          <p
            class="iconfont pos-rel icon"
            :class="{ 'icon-tijiao': index == 0, 'icon-jiangbei1': index != 0 }"
          ></p>
          <p class="name">{{ item.jiedmc }}</p>
        </li>
      </ul>

      <div class="clear h20"></div>

      <el-form :model="form" label-width="100px">
        <div v-for="(item, index) in formDefine" :key="index">
          <el-tabs v-if="item.kongjlx == '7'">
            <el-tab-pane
              :label="item2.text"
              v-for="(item2, index2) in item.kongjsj"
              :key="index2"
            >
              <div
                class="list-pub clearfix"
                v-for="(item3, index3) in item2.children"
                :key="index3"
              >
                <el-form-item :label="item3.biaot">
                  <el-cascader
                    v-if="item3.kongjlx == '3'"
                    v-model="formData[item3.id]"
                    :options="getOptionsData(item3.zidbm)"
                    :props="{ expandTrigger: 'hover' }"
                  ></el-cascader>

                  <el-upload
                    v-model="formData[item3.id]"
                    multiple
                    :file-list="fileList"
                    v-if="item3.kongjlx == '5'"
                    :headers="uploadHeaders"
                    :action="uploadAction"
                    list-type="picture-card"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>

                  <el-radio
                    v-for="item4 in item3.kongjsj.split(';')"
                    :label="item4.split(',')[1]"
                    v-if="item3.kongjlx == '8'"
                    v-model="formData[item3.id]"
                    >{{ item4.split(",")[0] }}</el-radio
                  >

                  <el-input
                    placeholder="请输入内容"
                    v-if="item3.kongjlx == '1'"
                    v-model="formData[item3.id]"
                  ></el-input>

                  <el-select
                    placeholder="请输入内容"
                    v-if="item3.kongjlx == '2'"
                    v-model="formData[item3.id]"
                  >
                    <el-option
                      v-for="item4 in item3.kongjsj.split(';')"
                      :label="item4.split(',')[0]"
                      :value="item4.split(',')[1]"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>

                <!-- 换行标记{{ item3.shifhh }} -->
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form>

      <div class="but-out clearfix">
        <el-button type="primary" @click="submit">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      uploadAction: this.serviceUrl + "/sys/common/upload",
      uploadHeaders: {
        "X-Access-Token": localStorage.getItem("token"),
      },
      fileList: [],
      formData: {},
      formDefine: [],
      daqsc: null,
      saisId: null,

      topData: [],
      menuSelect: 0,
      activeName: 0,
     
    };
  },

  inject: ["imageUrl", "serviceUrl"],

  mounted() {
    this.saisId = this.$route.query.id;
    this.dangqsc = this.$route.query.dangqsc;
    console.log(this.saisId);
    console.log(this.dangqsc);

    let that = this;

    axios
      .get(that.serviceUrl + "/sais_liuc/cbdaSaisLiuc/list", {
        headers: {
          "X-Access-Token": localStorage.getItem("token"),
        },
        params: {
          saisId: that.saisId,
          _t: new Date().getTime(),
        },
      })
      .then((resp) => {
        that.topData = resp.data.result.records;
      })
      .catch((error) => {
        //console.log(error);
      });

    // 表单定义
    axios
      .get(that.serviceUrl + "/sais_biaod/cbdaSaisBiaod/getFormDefine", {
        headers: {
          "X-Access-Token": localStorage.getItem("token"),
        },
        params: {
          saisId: this.saisId,
          saic: this.dangqsc,
          _t: new Date().getTime(),
        },
      })
      .then((resp) => {
        that.formDefine = resp.data.result;
      })
      .catch((error) => {
        //console.log(error);
      });
  },

  methods: {
    getOptionsData(zidbm) {
      return [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }]
    },

    submit() {
      console.log(this.formData);
      let that = this;

      const config = {
        headers: {
          "X-Access-Token": localStorage.getItem("token"),
        },
      };

      // 复用数值字段
      let tmp = {
        saisId: this.saisId,
        saic: this.dangqsc,
        formData: this.formData,
      };

      axios
        .post(
          that.serviceUrl + "/sais_biaod_jil/cbdaSaisBiaodJil/add",
          { shuz: JSON.stringify(tmp) },
          config
        )
        .then((resp) => {
          console.log(resp);
          if (resp.data.success) {
            that.$message.success("保存成功");
            this.$router.push("/pc/myWork");
            // localStorage.setItem("menuSelect", "1");
            // location.reload();
          } else {
            that.$message.error(resp.data.message);
          }
        })
        .catch((error) => {
          //console.log(error);
        });
    },

    menuChange(item, index) {
      this.menuSelect = index;
      console.log(item, index);
    },

    returnGo() {
      this.$router.go(-1); // 返回上一个页面
    },
  },
};
</script>

<style scoped lang="less"></style>
